<template>
  <el-card class="box-card margin-200" v-loading="loading" element-loading-text="拼命加载中">
    <div slot="header" class="clearfix">
      <el-row>
        <el-col :md="4">
          <el-input placeholder="检索：节点名称" v-model="filterText"> </el-input>
        </el-col>
        <el-col :md="20" :xs="20" :sm="20" class="text-right">
          <el-button type='primary' @click="handleADD">
            <i class="ti-plus"></i> 添加一级节点
          </el-button>
        </el-col>
      </el-row>
    </div>
    <div v-bind:style="{ 'min-height': _PageHeight+'px'}">
      <el-tree :data="tableData" :expand-on-click-node="false" :props="defaultProps" node-key="_id" highlight-current :render-content="renderContent" default-expand-all ref="tree" :filter-node-method="filterNode">
      </el-tree>
    </div>
    <categoryAdd :dialogs="dialogs" :is_exit='is_exit' :selArr="tableData" :selfid="selfid" @CB-dialogStatus="CB_dialogStatus"></categoryAdd>
  </el-card>
</template>
<script>
import categoryAdd from '@/page/system/category_add'

export default {
  //切换keep时，触发该方法
  activated: function() {
    this.getData();
  },
  data() {
    return {
      loading: false,
      tableData: [],
      dialogs: false,
      defaultProps: {
        children: 'children',
        label: 'bookname',

      },
      filterText: '',
      //空为添加一级，否则添加2级
      selfid: '',
      is_exit: false,
    }
  },
  watch: {
    'filterText': function(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.title.indexOf(value) !== -1;
    },
    //重新渲染节点
    renderContent(createElement, {
      node,
      data,
      store
    }) {
      var self = this;
      return createElement('span', [
        createElement('span', node.label),
        createElement('span', {
          attrs: {
            class: 'pull-right margin-right-20'
          }
        }, [createElement('div', {
            attrs: {
              class: "el-button-group"
            }
          }, [
            createElement('el-button', {
              attrs: {
                size: "small",
                type: 'info',
                icon: 'plus'
              },
              on: {
                click: function() {
                  self.selfid = data
                  self.dialogs = true
                }
              }
            }, "添加子类"),
            createElement('el-button', {
              attrs: {
                size: "small",
                type: 'primary',
                icon: 'edit'
              },
              on: {
                click: function() {
                  self.selfid = data
                  self.is_exit = true
                  self.dialogs = true
                }
              }
            }, "编辑"),
            createElement('el-button', {
              attrs: {
                size: "small",
                type: 'danger',
                icon: 'delete2'
              },
              on: {
                click: function() {
                  self.$confirm('确定要删除吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(() => {
                    self.fetch('/wordbook/deletes', {
                      _id: data._id,
                    }, self.$store.getters.Request_Head, 'POST').then((tableData) => {
                      console.log(tableData)
                      if (tableData.status.code !== 1001) {
                        self.$message.error(tableData.data ? tableData.data : tableData.status.title)
                      } else {
                        self.$message({
                          type: 'success',
                          message: '删除成功'
                        })
                        self.getData()
                      }
                    })
                  }).catch(() => {

                  })
                }
              }
            }, "删除")
          ])

        ]),
      ])
    },
    //添加1级
    handleADD() {
      this.selfid = ''
      this.dialogs = true
    },
    //获取主数据
    async getData() {
      this.loading = true
      let tableData = await this.fetch('/wordbook/index', {
        is_menu: -1
      }, this.$store.getters.Request_Head, 'POST')
      if (tableData.status.code !== 1001) {
        this.$message.error(tableData.data ? tableData.data : tableData.status.title)
      } else {
        this.loading = false
        this.tableData = tableData.data
      }
    },
    CB_dialogStatus(val) {
      this.dialogs = false
      this.is_exit = false
      this.getData()
    },
  },
  components: {
    categoryAdd,
  }
}

</script>
